<template>
  <page-header title="活动日历" background="#F7F0E6" />
  <uni-calendar :selected="selected" :showMonth="false" @change="handleChange" @monthSwitch="handleSwitch" />
  <view v-for="(item, index) in Data.list" :key="index" @click="handleActivityClick(item)" class='sub-con'>
    <view class='leftPic'>
      <image :src="addDomain('/static/calendar-default.png')" mode="aspectFit"></image>
    </view>
    <view class='midContent'>
      <view style="font-size: 14px;margin-bottom: 20px;">
        {{item.title}}
      </view>
      <view style="font-size: 12px;color:#c49e7a">
        开始时间:{{String(item.startTime).substring(0, 16)}}
      </view>
      <view style="font-size: 12px;color:#c49e7a">
        结束时间:{{String(item.endTime).substring(0, 16)}}
      </view>
    </view>
    <view class='rightIcon'>
      <image src="../../static/img/right.png"></image>
    </view>
  </view>
  <empty-img v-if="Data.isEmpty">
    <template #text>
      当前时间暂无活动
    </template>
  </empty-img>
</template>

<script setup>
  import {
    reactive,
    ref,
    toRefs
  } from 'vue';
  const queryData = ref({
    startTime: '2024-5-20',
    endTime: '2024-7-15'
  })
  const Data = reactive({
    list: [],
    selected: [],
    isEmpty: false
  })
  const {
    list,
    selected,
    isEmpty
  } = toRefs(Data)
  onLoad(() => {
    getData(true)
  })
  const initTime = () => {
    let date = new Date();
    let startTime = new Date(date.getFullYear(), date.getMonth() - 1, 20);
    let endTime = new Date(date.getFullYear(), date.getMonth() + 1, 15);
    queryData.value.startTime = formatTime(startTime);
    queryData.value.endTime = formatTime(endTime);
  }
  const getData = (isFirst) => {
    if (isFirst) {
      initTime()
      uni.showLoading()
      http.request({
        url: '/mall4cloud_point/ua/post/calendar',
        method: 'GET',
        data: {
          startTime: queryData.value.startTime,
          endTime: queryData.value.endTime
        }
      }).then((res) => {
        uni.hideLoading()
        Data.list = res
        handleDate()
      })
    } else {
      Data.isEmpty = false
      http.request({
        url: '/mall4cloud_point/ua/post/calendar',
        method: 'GET',
        data: {
          startTime: queryData.value.startTime,
          endTime: queryData.value.endTime
        }
      }).then((res) => {
        uni.hideLoading()
        Data.list = res
        if (Data.list.length == 0) Data.isEmpty = true
      })
    }

  }
  const handleDate = () => {
    let object = {}
    Data.list.forEach(item => {
      const startTime = new Date(handleIOS(item.startTime))
      const endTime = new Date(handleIOS(item.endTime))
      for (let date = startTime; date <= endTime; date.setDate(date.getDate() + 1)) {
        let key = formatTime(new Date(date))
        if (item.sectionId == 6) {
          object[key] = {
            ...object[key],
            'concert': true
          }
        } else {
          object[key] = {
            ...object[key],
            'activity': true
          }
        }
      }
    })
    let arr = []
    for (let key in object) {
      arr.push({
        date: key,
        info: '',
        data: {
          ...object[key]
        }
      })
    }
    Data.selected = arr
    queryData.value.startTime = formatTime(new Date())
    queryData.value.endTime = formatTime(new Date())
    getData()
  }
  const handleChange = (e) => {
    queryData.value.startTime = e.fulldate
    queryData.value.endTime = e.fulldate
    getData()
  }
  const handleSwitch = (e) => {
    let year = e.year //2024
    let month = e.month - 1
    let startTime = new Date(year, month - 1, 20)
    let endTime = new Date(year, month + 1, 15)
    queryData.value.startTime = formatTime(startTime)
    queryData.value.endTime = formatTime(endTime)
  }
  const handleIOS = (time) => {
    return String(time).substring(0, 10)
  }
  const formatTime = (date) => {
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    return `${year}-${month}-${day}`;
  }
  const handleActivityClick = (item) => {
    uni.navigateTo({
      url: '/pages/activity-detail/activity-detail?id=' + item.postId
    })
  }
    // 添加图片域名
    const addDomain = (path) => {
      const resourcesUrl = import.meta.env.VITE_APP_FILE_URL
      if (!path || /^http?:\/\//.test(path)) {
        return path
      } else {
        return resourcesUrl + path
      }
    }
</script>

<style>
  .sub-con {
    background-color: #f5f5f5bb;
    height: 125px;
    margin-top: 10px;
    border-radius: 15px;
    display: flex;
    flex-direction: row;
    align-items: center;

  }

  .leftPic {
    height: 100px;
    width: 140px;
    border-radius: 15px;
    margin: 5px;
  }

  .leftPic image {
    border-radius: 15px;
  }

  .rightIcon image {
    height: 30px;
    width: 20px;
    margin: 5px;
  }

  .midContent {
    margin: 10px;
    width: 180px;
  }
</style>
